<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入样式 -->
		<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
		<!-- 导入 Vue 3 -->
		<script src="//unpkg.com/vue@next"></script>
		<!-- 导入组件库 -->
		<script src="//unpkg.com/element-plus"></script>

		<title>Element Plus demo</title>

		<style>
			html,
			body,
			#app, .el-container, .el-menu {
				height: 100%;
				margin: 0;
			}

			::-webkit-scrollbar {
				width: 4px;
			}

			::-webkit-scrollbar-thumb {
				-webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
				background-color: rgb(238, 241, 245);
			}

			.el-header {
				background-color: #b3c0d1;
				color: var(--el-text-color-primary);
				line-height: 60px;
			}

			.el-aside {
				color: var(--el-text-color-primary);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <el-button>{{ message }}</el-button> -->

			<el-container style="border: 1px solid #eee">
				<el-aside width="200px">
					<el-menu :default-openeds="['1', '3']">
						<el-sub-menu index="1">

							<template #title>
								<el-icon>
									<message />
								</el-icon>Navigator One
							</template>

							<el-sub-menu index="1-4">
								<template #title>Option4</template>
								<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
							</el-sub-menu>

						</el-sub-menu>

					</el-menu>
				</el-aside>

				<el-container>
					<el-header style="text-align: right; font-size: 12px">
						<el-dropdown>
							<el-button size="mini" round style="margin-right: 15px">setting</el-button>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>View</el-dropdown-item>
									<el-dropdown-item>Add</el-dropdown-item>
									<el-dropdown-item>Delete</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
						<span>Tom</span>
					</el-header>

					<el-main>
						<el-table :data="tableData">
							<el-table-column prop="date" label="Date" width="140">
							</el-table-column>
							<el-table-column prop="name" label="Name" width="120">
							</el-table-column>
							<el-table-column prop="address" label="Address"> </el-table-column>
						</el-table>
					</el-main>
				</el-container>
			</el-container>

		</div>
		<script>
			const App = {
				data() {
					return {
						message: "Hello Element Plus",
					};
				},
			};
			const app = Vue.createApp(App);
			app.use(ElementPlus);
			app.mount("#app");
		</script>
	</body>
</html>
